<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>缩放</title>
</head>
<body>
    <div class="container">
        <div class="left">1</div>
        <div class="middle">2</div>
        <div class="right">3</div>
    </div>
</body>
<script>
      // 设计稿:  1920 * 1080
      // 目标适配:  1920 * 1080   3840 * 2160 ( 2 * 2 ) ;  7680 * 2160( 4 * 2)

      // 1.设计稿的尺寸
      let targetX = 1920;
      let targetY = 1080;
      let targetRatio = 16 / 9; // 宽高比率

      // 2.拿到当前设备(浏览器)的宽度
      let currentX = document.documentElement.clientWidth || document.body.clientWidth;
      let currentY = document.documentElement.clientHeight || document.body.clientHeight;
      //  1920 * 1080  -> 3840 * 2160

      // 3.计算缩放比例
      let scaleRatio = currentX / targetX; // 参照宽度进行缩放 ( 默认情况 )
      let currentRatio = currentX / currentY; // 宽高比率

      // 超宽屏
      if (currentRatio > targetRatio) {
        // 如果当前设备的宽高比率大于设计稿的宽高比率,那么就以高度为参照进行缩放，并且居中显示
        scaleRatio = currentY / targetY;
        document.body.style = `width:${targetX}px; height:${targetY}px;transform: scale(${scaleRatio}) translateX(-50%); left: 50%`;
      } else {
        // 4.开始缩放网页
        document.body.style = `width:${targetX}px; height:${targetY}px; transform: scale(${scaleRatio})`;
      }
</script>
<style>
    .container {
        height: 1080px;
        width: 1920px;
        display: flex;
    }
    .left,.middle,.right {
        width: 608px;
        font-size: 50px;
        text-align: center;
    }
    .left {
        background-color: black;
    }
    .middle {
        background-color: aquamarine;
    }
    .right {
        background-color: bisque;
    }
</style>
</html>